<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" placeholder="请输入手机号">
  <button>提交</button>
</body>
</html>
<script>
  let btn = document.querySelector('button'),
      inp = document.querySelector('input');
  btn.onclick = function(){
    // 点击时 校验手机号；
    let val = inp.value;
    // 怎么校验手机号是否合法？
    // 编写一个正则  校验  val 是否是一个合法的手机号
    // 手机号  1开头  11位  第二位是3-9
    console.log(val);
    var reg = /^1[3-9]\d{9}$/;
    if(reg.test(val)){
      console.log('验证通过')
    }else{
      alert('失败')
      inp.value = '';// 清空 输入框
    }
  }


// 有效数字
// 可以有小数点  可以有 +- 号  整数多位时 不能以0开头
// 02.34 0.34
// 0999 -234  +345.345  12.  234.34.53  23..424

var reg = /^[+-]?([1-9]\d+|\d)(\.\d+)?$/;
var reg = /^[+-]?([1-9]\d*|0)(\.\d+)?$/;


// 验证ＱＱ邮箱
// 可以是英文(8-15)  可以是QQ号5-11   @qq.com
var reg = /^([a-z]{8,15}|[1-9]\d{4,10})\@qq\.com$/i;// i 是修饰符 忽略大小写的；


// 验证身份证号码
// 18位  最后一位可以是 X
// 前6位是地址
// 出生的年 19 或 20 
// 月份 01-12  01-09  10-12  [01-12]
// 日子 01-31  01-09  10-19  20-29 30-31  
var reg = /^[1-9]\d{5}((19|20)\d{2})(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[01])\d{3}(\d|X)$/i;


// 匹配  18-65  之间的 有效年龄
// 18-19 20-29  30-39  40-49 50-59 60-65
// 18-19 20-59 [2-5]\d  6[0-5]
var reg = /^(1[89]|[2-5]\d|6[0-5])$/;



// 匹配密码  8-18位 既有大写字母 又有小写字母 还得有数字
function judge(str) {
  if(str.length < 8 || str.length > 18)return false
  if(!/[A-Z]/.test(str))return false
  if(!/[a-z]/.test(str))return false
  if(!/\d/.test(str))return false
  return true;
}

var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,18}$/
var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[#?&*-])[a-zA-Z0-9#?&*-]{8,18}$/

// 若是要求 密码是由8-18位的数字或者字母组成 不要求所有类型都存在
var reg = /^[0-9A-Za-z]{8,18}$/;


</script>